<template>
  <view class="notice-detail-container">
    <view class="notice-header">
      <view class="notice-tag" :class="getNoticeTagClass(notice.title)">
        {{ getNoticeTag(notice.title) }}
      </view>
      <text class="notice-title">{{ getNoticeTitleWithoutTag(notice.title) }}</text>
      <text class="notice-date">{{ notice.date }}</text>
    </view>
    
    <view class="notice-content">
      <text>{{ notice.content }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      notice: {
        id: 0,
        title: '',
        content: '',
        date: ''
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.getNoticeDetail()
    }
  },
  methods: {
    getNoticeDetail() {
      // 实际项目中应该从API获取数据
      // 这里模拟从本地数据获取
      const mockNotices = [
      {
          id: 1,
          title: '【活动通知】本周六举办社区文化节，欢迎居民参与',
          content: '尊敬的业主：本周六（3月15日）上午9:00-12:00将在小区中心广场举办"和谐社区文化节"活动，包含文艺表演、手工制作、美食分享等环节，欢迎各位业主携家人参与。',
          date: '2025-03-12'
        },
        {
          id: 2,
          title: '【维修计划】下周二小区供水管道维修通知',
          content: '尊敬的业主：因主供水管道需进行例行维护，定于下周二（3月18日）上午9:00-下午15:00暂停供水。请各位业主提前做好储水准备，由此带来的不便，敬请谅解。',
          date: '2025-03-11'
        },
        {
          id: 3,
          title: '【安全提醒】小区电动车充电安全规范',
          content: '尊敬的业主：为防范电动车充电安全隐患，请勿在楼道、楼梯间等公共区域为电动车充电，请使用小区指定的充电桩。违规充电不仅存在火灾风险，还将被物业处以警告或罚款。安全无小事，感谢您的配合。',
          date: '2025-03-10'
        },
        {
          id: 4,
          title: '【物业通知】3月物业费缴纳优惠活动开始',
          content: '尊敬的业主：即日起至3月31日，通过小程序缴纳物业费可享受95折优惠，年付享受额外5%折扣。欢迎各位业主积极参与，如有疑问请联系物业客服。',
          date: '2025-03-10'
        },
        {
          id: 5,
          title: '【环境整治】小区绿化带升级改造工程启动',
          content: '尊敬的业主：为提升小区环境品质，小区绿化带升级改造工程将于本月20日启动，预计工期15天。施工期间可能产生一定噪音，请各位业主给予理解和支持。',
          date: '2025-03-10'
        }
      ]
      
      const notice = mockNotices.find(item => item.id == this.id)
      if (notice) {
        this.notice = notice
      } else {
        uni.showToast({
          title: '公告不存在',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }
    },
    getNoticeTag(title) {
      // 提取【】中的内容作为标签
      const match = title.match(/【(.+?)】/)
      return match ? match[1] : '通知'
    },
    getNoticeTitleWithoutTag(title) {
      // 移除【】标签部分
      return title.replace(/【.+?】/, '')
    },
    getNoticeTagClass(title) {
      const tag = this.getNoticeTag(title)
      switch(tag) {
        case '活动通知': return 'tag-activity'
        case '维修计划': return 'tag-repair'
        case '安全提醒': return 'tag-safety'
        case '物业通知': return 'tag-property'
        case '环境整治': return 'tag-environment'
        default: return 'tag-default'
      }
    }
  }
}
</script>

<style lang="scss">
.notice-detail-container {
  padding: 30rpx;
  background-color: #fff;
  min-height: 100vh;
}

.notice-header {
  margin-bottom: 40rpx;
  
  .notice-tag {
    display: inline-block;
    padding: 6rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    color: #fff;
    margin-bottom: 20rpx;
    
    &.tag-activity {
      background: linear-gradient(to right, #ff9500, #ff5e3a);
    }
    
    &.tag-repair {
      background: linear-gradient(to right, #34c759, #32d74b);
    }
    
    &.tag-safety {
      background: linear-gradient(to right, #ff3b30, #ff2d55);
    }
    
    &.tag-property {
      background: linear-gradient(to right, #007aff, #5ac8fa);
    }
    
    &.tag-environment {
      background: linear-gradient(to right, #5856d6, #af52de);
    }
    
    &.tag-default {
      background: linear-gradient(to right, #8e8e93, #aeaeb2);
    }
  }
  
  .notice-title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    line-height: 1.4;
  }
  
  .notice-date {
    display: block;
    font-size: 26rpx;
    color: #999;
  }
}

.notice-content {
  padding: 30rpx 0;
  border-top: 1rpx solid #eee;
  
  text {
    font-size: 30rpx;
    color: #333;
    line-height: 1.8;
    white-space: pre-wrap;
  }
}
</style> 